<template>
    <a-card :title="title" class="card" :headStyle="headStyle" :bodyStyle="bodyStyle"  >
      <template v-for="(item,index) in grids">
        <a-card-grid :key="index" @click="handClick(item)" style="height:78px;" v-if="index<=13 || isShowMore">
            <a-icon :type="item.icon"/>
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{item.name}}</span>
              </template>
              <span class="bsSpan">{{item.name}}</span>
            </a-tooltip>
        </a-card-grid>
      </template>
      <a-card-grid @click="handClickMore()" style="height:78px;text-align:center;" v-if="grids.length>14">
        <a href="javascript:;">
          <span style="margin-right:8px;">{{!isShowMore?'展开':'收起'}}</span>
          <a-icon style="font-size:14px;" :type="!isShowMore?'down':'up'" />
        </a>
      </a-card-grid>
    </a-card>
</template>
<script>
export default {
  name: 'desformCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    grids: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      headStyle: {
        backgroundColor: 'rgb(234, 234, 234)'
      },
      bodyStyle: {
        minHeight: '240px'
      },
      isShowMore: false
    }
  },
  methods: {
    handClick(item) {
      this.$emit('handClick', item)
    },
    handClickMore() {
      this.isShowMore = !this.isShowMore
    }
  }
}
</script>
<style lang="less">
.ant-card-head{
  background-color: rgb(234, 234, 234);
}
.bsSpan{
  width: 100px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.card{
  margin-top: 10px;
  height: auto;
}
.card .ant-card-grid{
  width: 20%;
  text-align: left;
}
.card .ant-card-grid .anticon{
  vertical-align: middle;
  font-size: 30px;
}
.ant-card-grid{
  cursor: pointer;
}
</style>
